<template>
  <div class="home_main">
    <van-form @submit="doLogin">
      <van-cell-group inset class="login-form">
        <div class="login_title">
          <span class="title">注册新账号～</span>
          <sprn class="desc">未注册的新手机号，验证后自动注册</sprn>
        </div>
        <van-field v-model="data.name" name="用户名" label="用户名" placeholder="请输入用户名" input-align="right"
          error-message-align="right" :rules="[{ required: true, message: '请填写用户名' }]" />
        <van-field v-model="data.phone" name="手机号码" label="手机号码" type="tel" input-align="right"
          error-message-align="right" placeholder="请输入手机号码" :rules="[{ required: true, message: '请填写手机号码' }]" />
        <van-field v-model="data.code" center clearable label="短信验证码" input-align="right" error-message-align="right"
          placeholder="请输入短信验证码" :rules="[{ required: true, message: '请输入短信验证码' }]">
          <template #button>
            <van-button size="small" @click="sendSms" type="primary" v-if="!isSend">发送验证码</van-button>
            <van-button size="small" type="primary" disabled v-else>{{ smsCodeCount + '秒后重新获取' }}</van-button>
          </template>
        </van-field>
        <van-field v-model="data.invitCode" name="邀请码" label="邀请码" input-align="right" error-message-align="right"
          placeholder="请输入邀请码" :disabled="isInvit" :rules="[{ required: true, message: '请输入邀请码' }]" />
      </van-cell-group>
      <div style="margin: 1.5rem;">
        <van-button round block type="primary" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script setup>
import { ref, onBeforeMount } from 'vue'
import { showToast } from 'vant'
import { Register, LoginCode } from '@/config/api'
import storage from 'store'
import { ACCESS_TOKEN, isMobile } from '@/utils'
import router from '@/config/router'

const data = ref({
  name: '',
  phone: '',
  invitCode: '',
  code: ''
})

const isInvit = ref(false)

onBeforeMount(() => {
  const routerParams = router.currentRoute.value.query
  if (routerParams.id) {
    isInvit.value = true
    data.value.invitCode = routerParams.id
  }
})

const smsCodeCount = ref(60)
const isSend = ref(false)

let timer

const sendSms = () => {
  let { phone } = data.value
  if (isSend.value) {
    return
  }
  //   if (!name) {
  //     showToast('请输入用户名')
  //     return
  //   }

  if (!phone) {
    showToast('请输入手机号码')
    return
  }
  if (!isMobile(phone)) {
    showToast('请输入正确的手机号码')
    return
  }
  isSend.value = true
  LoginCode({ phone: phone })
    .then(() => {
      timer = setInterval(() => {
        if (smsCodeCount.value <= 60 && smsCodeCount.value > 0) {
          smsCodeCount.value--
        } else if (smsCodeCount.value <= 0) {
          isSend.value = false
          clearInterval(timer)
        }
      }, 1000)
    })
    .catch(() => {
      isSend.value = false
    })
  //   timer = setInterval(() => {
  //     if (smsCodeCount.value <= 60 && smsCodeCount.value > 0) {
  //       smsCodeCount.value--
  //     } else if (smsCodeCount.value <= 0) {
  //       isSend.value = false
  //       clearInterval(timer)
  //     }
  //   }, 1000)
}

const doLogin = () => {
  Register(data.value).then((res) => {
    storage.set(ACCESS_TOKEN, res.token)
    router.replace('/')
  })
}
</script>

<style scoped lang="less">
.home_main {
  //   padding-top: 0.93rem;
  min-height: 100vh;
  background-color: white;
  padding-top: 3.81rem;

  .login-form {
    margin: 0 0.6rem;

    /deep/ .van-cell {
      padding: var(--van-cell-vertical-padding) 0;

      // &:after{
      //     content:"";
      //     border-bottom: none;
      // }
      .van-cell__title {
        font-size: 0.37rem;
        font-family: PingFang SC;
        font-weight: 500;
        color: #333333;
      }
    }
  }
}

.login_title {
  display: flex;
  flex-direction: column;
  margin-bottom: 2.2rem;

  .title {
    font-size: 0.66rem;
    line-height: 1;
  }

  .desc {
    margin-top: 0.32rem;
    font-size: 0.42rem;
    color: #909399;
  }
}</style>
